<template>
	<div class="wraper" :class="{iphoneX:isIphoneX,iphone:isIphone,isMYKEY:isMYKEY,on:ajaxBtn}">
		<div class="nav-bar">
			<div class="arrow" @click="goBack"></div>
			<div class="service" @click="service">在线客服</div>
		</div>
		<div class="content" v-if="isSell==1">
			<div class="price2">{{orderInfo.account}}<i>{{iconName}}</i></div>
			<div class="timer">付款剩余时间<b>{{showTimer}}</b></div>
		</div>
		<div class="content" v-else>
			<div class="price">
				￥{{orderInfo.allPrice}}
				<b @click="copyText(orderInfo.allPrice)" class="copy"></b>
			</div>
			<div class="timer">付款剩余时间<b>{{showTimer}}</b></div>
		</div>
		<!-- 付款信息 -->
		<div class="is-sell" v-if="isSell==1">
			<p><span>转币地址</span></p>
			<p><b>{{dropAccount}}</b></p>
		</div>
		<div class="box" v-else :class="{alipay:payType==1,weixin:payType==3,bankCard:payType==2}">
			<div class="title" v-if="payType==1">打开支付宝，向以下支付宝转账{{orderInfo.allPrice}}元</div>
			<div class="title" v-if="payType==3">打开微信，向以下微信手机号转账{{orderInfo.allPrice}}元</div>
			<div class="title" v-if="payType==2">打开银行卡，向以下银行卡账号转账{{orderInfo.allPrice}}元</div>
			<div class="item">
				<div class="left">收款人</div>
				<div class="right">
					<span>{{dropName}}-请勿备注任何信息!</span>
					<b @click="copyText(dropName)" class="copy"></b>
				</div>
			</div>
			<div class="item d">
				<div class="left">平台认证金牌交易员<img src="../../static/images/makeorder.png" alt=""></div>
				<div class="right">已成交{{orderNum}}单</div>
			</div>
			<div class="item account" v-if="payType==1">
				<div class="left">支付宝账号</div>
				<div class="right">
					{{dropCode}}
					<b @click="copyText(dropCode)" class="copy"></b>
				</div>
			</div>
			<div class="item account" v-if="payType==3">
				<div class="left">微信转账手机号</div>
				<div class="right">{{dropCode}}<b @click="copyText(dropCode)" class="copy"></b></div>
			</div>
			<div class="item account" v-if="payType==2">
				<div class="left">银行卡账号</div>
				<div class="right">{{dropCode}}<b @click="copyText(dropCode)" class="copy"></b></div>
			</div>
			<div class="item account bankName" v-if="payType==2">
				<div class="left">收款银行</div>
				<div class="right">{{bankName}}</div>
			</div>
		</div>
		<!-- 订单信息 -->
		<div class="order-detail" :class="{down:showDetail}" @click="isOrderDetail">
			<div class="slide">
				<div class="left">
					<img class="icon" :src="logo">订单详情
				</div>
				<div class="right" v-if="isSell != 1">
					<img class="arrow" src="../../static/images/arrow-down.png">
				</div>
			</div>
			<div class="order-list" v-show="showDetail" @click.stop="stop">
				<div class="item"><span>订单金额</span><b :class="{big:isSell==1}">￥{{orderInfo.allPrice}}</b></div>
				<div class="item"><span>数量</span><b>{{orderInfo.account}} {{iconName}}</b></div>
				<div class="item"><span>订单编号</span><b>{{orderInfo.id}}<b @click.stop="copyText(orderInfo.id)" class="copy"></b></b></div>
			</div>
		</div>
		<!-- 说明而已 -->
		<div class="safe">
			<div class="title">放心转账，安心交易</div>
			<ul>
				<li>
					<img src="../../static/images/s1.png" alt="">
					<p><b>安全保障</b></p>
					<p>银行级存储和风控</p>
				</li>
				<li>
					<img src="../../static/images/s2.png" alt="">
					<p><b>商家保障</b></p>
					<p>平台认证商家</p>
				</li>
				<li>
					<img src="../../static/images/s3.png" alt="">
					<p><b>服务保障</b></p>
					<p>7*24小时客户服务</p>
				</li>
			</ul>
		</div>
		<!-- 操作按钮 -->
		<div class="btns" :class="{iphoneX:isIphoneX}">
			<div class="cancel" @click="showDialog(1)">取消</div>
			<div class="conform" @click="showDialog(2)" v-if="isSell==1">
				<span>去转币</span>
			</div>
			<div class="conform" :class="{conform2:countDownTime > 0}" @click="showDialog(2)" v-else>
				<span>{{countDownTime?'我已付款('+ countDownTime +'s)':'我已付款'}}</span>
			</div>
			<b class="tips" v-if="isSell==1"></b>
		</div>
		<!-- 我已付款弹窗 -->
		<van-popup overlay-class="make-order" v-if="dialogStatus==2" v-model="showBox">
			<div class="dialog make-order-box">
				<h1>付款确认</h1>
				<p>请确认已向卖家付款</p>
				<p class="info">恶意点击将直接冻结账户</p>
				<div class="config">
					<span class="cancel" @click="showDialog">取消</span>
					<span class="conform" @click="upload(1)">确认</span>
				</div>
			</div>
		</van-popup>
		<!-- 取消交易弹窗 -->
		<van-popup overlay-class="make-order" v-if="dialogStatus==1" v-model="showBox" @closed="selectCancel">
			<div class="dialog make-order-box" @click.stop="stop">
				<h1>确认取消交易</h1>
				<p class="info" v-if="isSell != 1">如果您已经向卖家付款，请千万不要取消交易</p>
				<p v-if="isSell != 1">取消规则：买家当日累计3笔取消，会限制当日买入功能</p>
				<p v-if="isSell != 1" class="select" :class="{on:isSelect}" @click="selectCancel">我确认还没有付款给对方</p>
				<p v-if="isSell == 1">买家当日累计3笔取消，会限制当日买入功能</p>
				<div class="config">
					<span class="cancel" @click="showDialog">我再想想</span>
					<span class="conform2" :class="{on:isSelect}" @click="upload(0)">确认</span>
				</div>
			</div>
		</van-popup>
	</div>
</template>
<script src="./makeOrder.js"></script>
<style scoped>
	@import './makeOrder.css';
</style>
<style>
	.van-overlay.make-order{
		background:rgba(0,0,0,.5);
	}
</style>